<template>
  <ContentBox title="考试合格率" height="100%" width="100%">
    <div class="pass_rate">
      <div class="pass_title">课程分类</div>
      <div class="water_rate">
        <div class="water_exam">
          <Water :waterData="commonWaterData" />
          <Water :waterData="majorWaterData" />
        </div>
        <div class="column">
          <div
            v-for="(item, index) in columnData"
            :key="index"
            class="column_item"
          >
            <div class="column_type">{{ item.type }}</div>
            <div class="column_value">{{ item.value }}</div>
            <div class="column_line">
              <div :style="{ width: item.value }">
                <div
                  class="lineAdd"
                  :style="{ background: colorList[index] }"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pass_title">考试数据</div>
      <div class="exam_data">
        <div v-for="(item, index) in examData" :key="index">
          <span class="exam_title">{{ item.title }}</span>
          <span class="exam_value">{{ item.value }}</span>
        </div>
      </div>
      <div class="pass_title">课程教学质量</div>
      <div class="line_box">
        <div ref="lineChart"></div>
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from './contentBox'
import Water from '../dashboard/liquidfill.vue'

export default {
  components: {
    ContentBox,
    Water,
  },
  data() {
    return {
      commonWaterData: {
        type: '公共课程',
        value: 0.6,
      },
      majorWaterData: {
        type: '专业课程',
        value: 0.55,
      },
      columnData: [
        {
          type: '优秀',
          value: '75%',
        },
        {
          type: '达标',
          value: '65%',
        },
        {
          type: '不及格',
          value: '55%',
        },

        {
          type: '优秀',
          value: '45%',
        },
        {
          type: '良好',
          value: '35%',
        },
        {
          type: '达标',
          value: '25%',
        },
        {
          type: '未达标',
          value: '15%',
        },
      ],

      colorList: [
        '#4374d1',
        '#40b3d0',
        '#f1cb54',
        '#fc8a3b',
        '#31d094',
        '#abf2f8',
        '#41f7c7',
      ],

      examData: [
        {
          title: '考试人数',
          value: '1234',
        },
        {
          title: '优秀人数',
          value: '1234',
        },
        {
          title: '合格人数',
          value: '1234',
        },
      ],

      lineChart: null,
    }
  },
  mounted() {
    this.setLineChart()
  },
  methods: {
    setLineChart() {
      this.lineChart = this.echarts.init(this.$refs.lineChart)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          show: true, //是否显示
          top: '5%', // bottom:"20%" // 组件离容器的距离
          itemGap: 20, // 图例每项之间的间隔。
          data: ['公共课程', '专业课程'],
          textStyle: {
            color: '#80bbd1', // 文字的颜色。
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: [
              '11-11',
              '11-12',
              '11-13',
              '11-14',
              '11-15',
              '11-16',
              '11-17',
            ],
            axisLine: {
              lineStyle: {
                color: '#5d82a9',
              },
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              color: '#73dff2',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#5d82a9',
              },
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              color: '#73dff2',
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '公共课程',
            type: 'line',
            stack: 'Total',
            smooth: true, //是否用曲线显示
            symbol: 'none',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#00ccff',
                },
              },
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#00ccff80', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4fccd530', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              focus: 'series',
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '专业课程',
            smooth: true, //是否用曲线显示
            symbol: 'none',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#17bff080', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#4da1cb30', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#17bff0',
                },
              },
            },
            emphasis: {
              focus: 'series',
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      }
      this.lineChart.setOption(option, true)
    },
  },
}
</script>

<style scoped lang="scss">
.pass_rate {
  width: 100%;
  height: 100%;
  .pass_title {
    font-size: 16px;
    color: #f2f2f2;
    font-weight: bold;
    margin: 5px 0 5px 15px;
  }
  .water_rate {
    display: flex;
    width: 100%;
    height: 40%;
    .water_exam {
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .column {
      height: 100%;
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .column_item {
        color: #90dff2;
        display: flex;
        height: 20px;
        align-items: center;
        .column_type {
          width: 50px;
          height: 100%;
          text-align: right;
        }
        .column_value {
          width: 40px;
          height: 100%;
          text-align: center;
        }
        .column_line {
          width: 180px;
          height: 15px;
          > div {
            height: 100%;
            .lineAdd {
              height: 15px;
              animation: lineAddWidth 3s;
            }
          }
        }
      }
    }
  }
  .exam_data {
    color: #a8f2f8;
    display: flex;
    width: 100%;
    height: 30px;
    align-items: center;
    justify-content: space-evenly;
    > div {
      .exam_title {
        font-size: 16px;
        margin-right: 14px;
      }
      .exam_value {
        font-size: 20px;
      }
    }
  }
  .line_box {
    width: 100%;
    height: 40%;
    div {
      width: 100%;
      height: 100%;
    }
  }
}
@keyframes lineAddWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>